<template>
	<div class="custom">
		<template v-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
			<div>
				<h1>
					<label>{{ extension.title }}</label>
					<a v-if="extension.hyperlinks_text" :href="extension.hyperlinks_text.value" target="view_window">{{ extension.hyperlinks_text.key }}</a>
				</h1>
				<ul v-if="extension.item && extension.item.length > 0">
					<li v-for="(item, index) in extension.item" :key="index">
						<a v-if="isUrl(item.value)" :href="item.value" target="view_window">{{ item.key }}</a>
						<p v-else>{{ item.key }}</p>
					</li>
				</ul>
				<article>{{ extension.description }}</article>
			</div>
		</template>
		<template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
			<div class="evaluate">
				<h1>{{ TUITranslateService.t('message.custom.对本次服务评价') }}</h1>
				<ul class="evaluate-list">
					<li class="evaluate-list-item" v-for="(item, index) in Math.max(isCustom.score as number, 0)" :key="index">
						<Icon :file="star" class="file-icon"></Icon>
					</li>
				</ul>
				<article>{{ isCustom.comment }}</article>
			</div>
		</template>
		<template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
			<div class="order">
				<div v-for="item in isCustom.orderItemList" :key="item.id" class="order-item">
					<el-image :src="$getFileUri(item.pic)" style="border-radius: 10px"></el-image>

					<div class="order-item-info">
						<div class="prod-name">{{ item.prodName }}</div>
						<div class="num prod-name">{{ item.properties }}</div>
						<div class="num">x{{ item.num }}</div>
						<div class="amount">{{ $amountFormat(item.totalAmount) }}</div>
					</div>
				</div>

				<div class="order-col">
					<div class="order-label">{{ $t('Order.orderNumber') }}：</div>
					<div class="order-value">
						{{ isCustom.id }}
					</div>
				</div>

				<div class="order-col">
					<div class="order-label">{{ $t('Order.orderTime') }}：</div>
					<div class="order-value">
						{{ isCustom.createTime }}
					</div>
				</div>

				<div class="order-col">
					<div class="order-label">{{ $t('Order.orderAmount') }}：</div>
					<div class="order-value orderAmount">
						{{ $amountFormat(isCustom.orderAmount) }}
					</div>
				</div>

				<div class="order-col" v-if="Number(isCustom.reduceAmount)">
					<div class="order-label">{{ $t('Order.reduceAmount') }}：</div>
					<div class="order-value reduceAmount">-{{ $amountFormat(isCustom.reduceAmount) }}</div>
				</div>

				<div class="order-col">
					<div class="order-label">{{ $t('Order.actualAmount') }}：</div>
					<div class="order-value price">
						{{ $amountFormat(isCustom.actualAmount) }}
					</div>
				</div>
				<div style="display: flex">
					<OrderStateTag :state="isCustom.state" />
					<el-button @click="viewFn(isCustom)" type="primary" plain style="width: 60px; margin-left: auto">{{ $t('Order.view') }}</el-button>
				</div>
			</div>
		</template>

		<template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.PRODUCT">
			<div class="product">
				<img :src="$getFileUri(isCustom.pic)" alt="" style="border-radius: 10px" />
				<main>
					<h1>{{ isCustom.title }}</h1>
					<p>{{ isCustom.description }}</p>
					<span>{{ $amountFormat(isCustom.price) }}</span>
				</main>
			</div>
		</template>

		<template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
			<div class="textLink">
				<p>{{ isCustom.text }}</p>
				<a :href="isCustom.link" target="view_window">{{ TUITranslateService.t('message.custom.查看详情>>') }}</a>
			</div>
		</template>

		<template v-else>
			<span v-html="content.custom"></span>
		</template>
	</div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from '../../../../adapter-vue';
import { IMessageModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
import { isUrl, JSONToObject } from '../../../../utils/index';
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
import { ICustomMessagePayload } from '../../../../interface';
import Icon from '../../../common/Icon.vue';
import star from '../../../../assets/icon/star-light.png';
import OrderStateTag from '/@/components/biz/orderStateTag.vue';

import { IOrderItem } from '../../message-input-toolbar/order/types/index';

interface Props {
	messageItem: IMessageModel;
	content: any;
}

const props = withDefaults(defineProps<Props>(), {
	messageItem: undefined,
	content: undefined,
});

const custom = ref();
const message = ref<IMessageModel>();
const extension = ref();

const isCustom = ref<ICustomMessagePayload & IOrderItem>({
	businessID: '',
});

watchEffect(() => {
	custom.value = props.content;
	message.value = props.messageItem;
	const { payload } = props.messageItem;
	isCustom.value = payload.data || '';
	isCustom.value = JSONToObject(payload.data);
	if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
		extension.value = JSONToObject(payload.extension);
	}
});

const router = useRouter();

const viewFn = (row: ICustomMessagePayload & IOrderItem) => {
	console.log(row, 'sdfsdf');

	router.push('/bizs/Order/index?orderId=' + row.id);
};

const openLink = (url: any) => {
	window.open(url);
};
</script>
<style lang="scss" scoped>
@import '../../../../assets/styles/common.scss';

a {
	color: #679ce1;
}

.custom {
	font-size: 14px;

	h1 {
		font-size: 14px;
		color: #000000;
	}

	h1,
	a,
	p {
		font-size: 14px;
	}

	.evaluate {
		ul {
			display: flex;
			padding-top: 10px;
		}

		&-list {
			display: flex;
			flex-direction: row;

			&-item {
				padding: 0px 2px;
			}
		}
	}

	.order {
		display: flex;
		flex-direction: column;
		gap: 10px;
		min-width: 280px;

		&-item {
			display: flex;
			gap: 10px;

			:deep(.el-image) {
				width: 80px;
				height: 80px;
				border-radius: 10px;
			}

			&-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				width: 0;

				.amount {
					font-size: 16px;
					font-weight: 700;
				}

				.prod-name {
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.num {
					color: gray;
				}
			}
		}

		.order-col {
			display: flex;
			justify-content: space-between;
			gap: 10px;

			.price {
				font-size: 16px;
				font-weight: 700;
				color: orange;
			}

			.orderAmount {
				font-size: 16px;
				font-weight: 700;
			}

			.reduceAmount {
				color: red;
				font-weight: 700;
				font-size: 16px;
			}

			.actualAmount {
				font-size: 16px;
				font-weight: 700;
				color: orange;
			}
		}
	}

	.product {
		display: flex;

		main {
			padding-left: 5px;

			p {
				font-family: PingFangSC-Regular;
				width: 145px;
				line-height: 17px;
				font-size: 14px;
				color: #999999;
				letter-spacing: 0;
				margin-bottom: 6px;
				word-break: break-word;
			}

			span {
				font-family: PingFangSC-Regular;
				line-height: 25px;
				color: #000;
				font-size: 16px;
				font-weight: 700;
			}
		}

		img {
			width: 67px;
			height: 67px;
		}
	}
}
</style>
